<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <script src="./js/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./js/element-ui.css">
    <!-- 引入组件库 -->
    <script src="./js/element-ui.js"></script>
    <style>
        body {
            background-color: azure;
        }

        .box-card {
            margin-top: 15%;
            margin-left: 20%;
            width: 60%;
            background-color: aquamarine;
            text-align: center;
        }

        .box-card input {
            height: 30px;
        }

        .box-card .el-button {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 登录表单 -->

        <!-- 路由匹配到的组件渲染到这里 -->
        <router-view></router-view>
    </div>
    <script>
        var login = {
            data() {
                return {
                    loginData: {}
                }
            },
            template: `
            <div>
                <el-card class="box-card">
            <!-- <div v-for="o in 4" :key="o" class="text item">
                {{'列表内容 ' + o }}
                
            </div> -->
            <div>
                <h1>登录页面</h1>
                用户登录：<input type="text" v-model="loginData.username"><br/>
                <!-- &nbsp; 代表一个字符-->
                <!-- &ensp;半个汉字 -->
                <!-- &emsp; 一个中文字符，两个字符 -->
                密&emsp;&emsp;码：<input type="password" v-model="loginData.password"><br/>
                <el-button type="primary" @click="loginHandler">登录</el-button>


            </div>
           
        </el-card>
            

        </div>
        `,
            methods: {
                loginHandler() {
                    //默认是表单，要转为json格式存储
                    axios.defaults.headers.post['Content-Type'] = 'application/json';
                    axios({

                        url: 'http://39.103.160.49:8888/user/login',
                        method: 'post',
                        data: JSON.stringify(this.loginData)
                    }).then(res => {
                        //用户身份令牌
                        sessionStorage.setItem('token', res.data.data.token)
                        // this.$message({
                        //     message: '恭喜你，这是一条成功消息',
                        //     type: 'success'
                        // });
                        this.$message.success('登录成功');
                        // 登录成功，跳转至首页
                        this.$router.push({
                            path: '/index'
                        })
                    }).catch(error => {
                        console.log(error);
                        this.$message.error('账号或者密码错误，请检查一下');
                    })
                },
            }

        }
        var index = {
            template: `
            <div>
                 <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <el-button v-if="!token" type="primary" @click="login">登录</el-button>
                <el-button v-if="token" type="danger" @click="logout">退出</el-button>
            </el-form-item>
        </el-form>
            <el-table :data="tabledata" style="width: 100%">
                <el-table-column prop="username" label="用户名" width="100"></el-table-column>
                <el-table-column prop="realname" label="姓名" width="100"></el-table-column>
                <el-table-column prop="telephone" label="手机号" width="150"></el-table-column>
                <el-table-column prop="gender" label="性别" width="100"></el-table-column>
                <el-table-column label="出生日期">
                    <template v-slot="scope">
                        {{ scope.row.birth | fmtDate}}
                    </template>
                </el-table-column>
                <el-table-column label="头像" width="100">
                    <template v-slot="scope">
                        <img :src="scope.row.userFace" width='50'>
                    </template>
                </el-table-column>
            </el-table>
        </div>
            
            `,
            data() {
                return {
                    tabledata: [],
                    token: null

                }
            },
            methods: {
                async loading() {
                    
                    axios({
                        url: 'http://39.103.160.49:8888//baseUser/findAll',
                        method: 'get',
                        headers: {
                            'Authorization': sessionStorage.getItem('token')
                        }
                    }).then(res => {

                        this.tabledata = res.data.data;
                        console.log(res.data.data);

                    })
                },
                logout() {
                    // 清空存储的token
                  
                    sessionStorage.removeItem('token');
                    this.token = null
                    // 跳转至登录页
                    this.$router.push('/login');
                }
               
            },
            created() {
                this.token = sessionStorage.getItem('token')
                this.loading();
            },
            filters: {
                fmtDate(val) {
                    return new Date(val).toLocaleString();
                }
            }


        }
        var router = new VueRouter({
            routes: [
                {
                    path: '/',
                    redirect: '/login'
                },
                {
                    path: '/login',
                    component: login
                },
                {
                    path: '/index',
                    component: index
                },
            ]
        })
        router.beforeEach((to, from, next) => {
            var token = sessionStorage.getItem('token');
            //当之前的路径不是login(to)且没有token
            if (to.path != '/login' && !token) {
                alert('请登录');
                //登录之后路径返回到login页面
                next('/login')
            }
            //如果有token,正常跳转
            next();
        })
        var vm = new Vue({
            el: '#app',
            data: {

            },
            methods: {
               

            },
            router

        })
    </script>
</body>

</html>